<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>管理后台</title>
  <!-- <link rel="stylesheet" type="text/css" href="/lib/semantic-ui/semantic.min.css" /> -->
  <link href="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.min.css" rel="stylesheet">
  <!-- <script src="/lib/jquery-3.2.1.min.js"></script> -->
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <!-- <script src="/lib/semantic-ui/semantic.min.js"></script> -->
  <script src="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.min.js"></script>
  <!-- <script src="/lib/vue.js"></script> -->
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
  <!-- <script src="/lib/axios.min.js"></script> -->
  <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
  <script src="/js/util.js"></script>
  <script src="/js/components.js"></script>
</head>

<body>



  <div id="app" class="ui bottom attached segment pushable">
    <div class="ui visible inverted left vertical sidebar menu">
      <div class="ui secondary pointing menu">
        <a class="active item">
          <img src="/img/logo.png" class="ui centered mini image"></img>Master</a>
        <div class="right menu">
          <a v-on:click="back()" class="ui active item">返回系统 </a>
        </div>
      </div>
      <a class="item">
        <p>作业管理平台</p>
      </a>
      <a v-on:click="ovactive()" v-bind:class="{ active: active[0] }" class="item">
        <i class="home icon"></i> 系统概览 </a>
      <a v-on:click="cmactive()" v-bind:class="{ active: active[1] }" class="item">
        <i class="user icon"></i> 班级管理 </a>
      <a v-on:click="smactive()" v-bind:class="{ active: active[2] }" class="item">
        <i class="user icon"></i> 学生管理 </a>
      <a v-on:click="tmactive()" v-bind:class="{ active: active[3] }" class="item">
        <i class="folder open icon"></i> 作业管理 </a>
      <a v-on:click="pmactive()" v-bind:class="{ active: active[4] }" class="item">
        <i class="file alternate icon"></i> 题目管理 </a>

    </div>
    <div class="pusher" style="width:80%">
      <div class="ui basic segment">









        <template v-if="active[0]">
          <loader v-if="loading"></loader>
          <div class="ui segment">
            <h3 class="ui header">评测机状态</h3>
            <div class="ui horizontal list">

              <template v-for="container in list_container">
                <div v-if="container.Image=='image-judge' || container.Image=='image-sim'" class="item">
                  <img class="ui avatar image" src="/img/server.png"></img>
                  <div class="content"><div class="header">{{container.Names[0]}}</div>{{container.Status}} </div>
                </div>
              </template>

            </div>
          </div>

          <div class="ui segment">
            <h3 class="ui header">统计数据</h3>
            <div class="ui statistics">
              <div class="statistic">
                <div class="value">
                  {{object_statistics.problems}}
                </div>
                <div class="label">题目 </div>
              </div>
              <div class="statistic">
                <div class="value">
                  {{object_statistics.submissions}}
                </div>
                <div class="label">提交 </div>
              </div>
              <div class="statistic">
                <div class="value">
                  {{object_statistics.students}}
                </div>
                <div class="label">学生 </div>
              </div>
            </div>
          </div>
        </template>

        <template v-if="active[1]">
          <div class="ui segment">

            <h3 class="ui header">创建班级</h3>
            <div class="ui form">
              <div class="fields">
                <div class="field">
                  <input v-model="form_class.name" type="text" placeholder="班级名称" />
                </div>
                <div v-on:click="classadd()" class="ui submit button">提交</div>
              </div>
            </div>
          </div>

          <div class="ui segment">
            <h3>全部班级</h3>
            <table class="ui celled table">
              <thead>
                <tr>
                  <th class="two wide">编号</th>
                  <th class="six wide">名称</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item in list_class">
                  <td>{{item.class_id}}</td>
                  <td>{{item.class_name}}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </template>

        <template v-if="active[2]">
          <loader v-if="loading"></loader>

          <div class="ui segment">

            <h3 class="ui header">添加学生</h3>
            <div class="ui form">
              <div class="fields">
                <div class="field">
                  <input v-model="form_stu.id" type="text" placeholder="ID" />
                </div>
                <div class="field">
                  <input v-model="form_stu.password" type="text" placeholder="Password" />
                </div>
                <div class="field">
                  <select v-model="form_stu.classes_flag" class="ui fluid search dropdown">
                    <option value="">班级列表...</option>
                    <option v-for="item in list_class">{{item.class_id}}-{{item.class_name}}</option>
                  </select>
                </div>
                <div v-on:click="stuadd()" v-bind:class="{ loading: form_stu_posting }" class="ui submit button">提交</div>
              </div>
            </div>



            <h3 class="ui header">添加学生（批量）</h3>
            <div class="ui form">
              <div class="fields">
                <div class="field">
                  <!-- <label>起始学号</label> -->
                  <input v-model="form_stu_muti.arg0" type="text" placeholder="Begin" />
                </div>
                <div class="field">
                  <!-- <label>结束学号</label> -->
                  <input v-model="form_stu_muti.arg1" type="text" placeholder="End" />
                </div>
                <div class="field">
                  <!-- <label>密码</label> -->
                  <input v-model="form_stu_muti.password" type="text" placeholder="Password" />
                </div>
                <div class="field">
                  <select v-model="form_stu_muti.classes_flag" class="ui fluid search dropdown">
                    <option value="">班级列表...</option>
                    <option v-for="item in list_class">{{item.class_id}}-{{item.class_name}}</option>
                  </select>
                </div>
                <div v-on:click="stuaddmuti()" v-bind:class="{ loading: form_stu_muti_posting }" class="ui submit button">提交</div>
              </div>
            </div>
          </div>

          <div class="ui segment">
            <h3 class="ui header">学生账户</h3>
            <table class="ui fixed single line celled table">
              <thead>
                <tr>
                  <th class="one wide">学号</th>
                  <th class="one wide">昵称</th>
                  <th class="two wide">班级</th>
                  <th class="two wide">邮箱</th>
                  <th class="one wide">提交</th>
                  <th class="one wide">通过</th>
                  <th class="two wide">通过率</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item in list_stu">
                  <td>{{item.id}}</td>
                  <td v-if="item.nick!=null">{{item.nick}}</td>
                  <td v-if="item.nick==null" style="color: #c9c9c9">无</td>
                  <td>{{item.classes}}</td>
                  <td v-if="item.email!=null">{{item.email}}</td>
                  <td v-if="item.email==null" style="color: #c9c9c9">无</td>

                  <td>{{item.submit}}</td>
                  <td>{{item.accept}}</td>
                  <td>{{(item.accept*100/item.submit).toFixed(1)}}%</td>
                </tr>

              </tbody>
            </table>
          </div>
        </template>





        <template v-if="active[3]">

          <loader v-if="loading"></loader>

          <div class="ui segment">
            <h3 class="ui header">新建作业</h3>
            <div class="ui form">
              <div class="fields">
                <div class="field">
                  <input v-model="form_topic.title" type="text" placeholder="作业" />
                </div>
                <div class="field">
                  <div class="ui input left icon">
                    <i class="calendar icon"></i>
                    <input v-model="form_topic.begin_time" type="date" placeholder="开始时间" />
                  </div>
                </div>
                <div class="field">
                  <div class="ui input left icon">
                    <i class="calendar icon"></i>
                    <input v-model="form_topic.end_time" type="date" placeholder="结束时间" />
                  </div>
                </div>

                <div class="field">
                  <select class="ui fluid search dropdown" v-model="form_topic.class_flag">
                    <option value="">班级列表...</option>
                    <option v-for="item in list_class">{{item.class_id}}-{{item.class_name}}</option>
                  </select>
                </div>

                <div v-on:click="topicadd()" v-bind:class="{loading: form_topic_posting}" class="ui submit button">提交</div>
              </div>
            </div>
          </div>

          <div v-if="!childactive" class="ui segment">
            <h3 class="ui header">所有作业</h3>
            <table class="ui fixed single line celled table">
              <thead>
                <tr>
                  <th class="one wide">编号</th>
                  <th class="two wide">标题</th>
                  <th class="one wide">状态</th>
                  <th class="one wide">操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item in list_topic">
                  <td>{{item.id}}</td>
                  <td>{{item.title}}</td>
                  <td v-if="item.topicStatus==1">
                    <i class="icon checkmark"></i> 进行中</td>
                  <td v-if="item.topicStatus==0">
                    <i class="icon close"></i> 已关闭</td>
                  <td v-if="item.topicStatus==-1">
                    <i class="icon clock"></i> 未开始</td>
                  <td>

                    <a>编辑</a> |
                    <a v-on:click="analysisactive(item.id)">查看分析</a>
                  </td>
                </tr>

              </tbody>
            </table>
          </div>

          <div v-if="childactive" class="ui segment">
            <div v-if="loading_analysis" class="ui active inverted dimmer">
              <div class="ui text loader">加载</div>
            </div>

            <a v-on:click="analysisback">
              <i class="icon chevron left" style="margin-bottom:16px"></i>返回</a>


            <template v-if="!loading &amp;&amp; object_analysis != null">
              <h3 class="ui header">作业总览</h3>
              <!-- 已完成统计 -->
              <div class="ui segment">
                <div class="ui top left attached label">已完成</div>

                <div class="ui relaxed horizontal list">
                  <div v-for="item in object_analysis.allACWithAVG" class="item">
                    <img class="ui avatar image" src="/img/stevie.jpg" />
                    <div class="content">
                      <a class="header">{{item.id}}</a>
                      <a class="ui label">
                        {{isNaN(item.simAVG)?'无':item.simAVG+'%'}}
                      </a>

                    </div>
                  </div>
                </div>
              </div>
              <!-- 未完成统计 -->
              <div class="ui segment">
                <div class="ui top left attached label">未完成</div>

                <div class="ui relaxed horizontal list">
                  <div v-for="item in object_analysis.notCompleteWithAVG" class="item">
                    <img class="ui avatar image" src="/img/stevie.jpg" />
                    <div class="content">
                      <a class="header">{{item.id}}</a>
                      <a class="ui label">
                        {{isNaN(item.simAVG)?'None':item.simAVG+'%'}}
                      </a>
                    </div>
                  </div>
                </div>
              </div>

              <h3 class="ui header">详情及分组</h3>

              <!-- 每个问题一个表格 -->
              <table v-for="(item, index) in object_analysis.detailInfos" class="ui selectable table">
                <thead>
                  <!-- 标题 -->
                  <tr>
                    <th colspan="3">[题目{{index+1}}] {{item.problem_title}} </th>
                  </tr>
                  <!-- 分组 -->
                  <tr>
                    <th colspan="3">
                      <p v-if="item.groups.length==0"></p>
                      <div class="ui four column grid">
                        <div v-for="group in item.groups" class="column">

                          <div class="ui segment" data-tooltip="雷同作业分组" data-position="top center">
                            <div class="ui  horizontal list">
                              <div v-for="(g, index) in group" class="item">
                                <!-- <img class="ui avatar image" src="/img/stevie.jpg" /> -->
                                <div class="content">
                                  <a class="header" v-bind:title="g.src">{{g.userId}}
                                    <span v-if="index==0">(原创)</span>
                                  </a>

                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="s in item.submissions" v-on:click="goSubmission(s.id)">
                    <td class="collapsing">#{{s.id}}</td>
                    <td>{{s.userId}}</td>
                    <td class="right aligned collapsing" v-if="s.sim==-1">
                      <span style="color:#c9c9c9">编译失败或无相似度信息</span>
                    </td>
                    <td class="right aligned collapsing" v-if="s.sim!=-1">
                      <a v-if="s.sim&gt;=80" class="ui red label">{{s.sim}}%</a>
                      <a v-if="s.sim&gt;=60 &amp;&amp; s.sim&lt;80" class="ui orange label">{{s.sim}}%</a>
                      <a v-if="s.sim&gt;=40 &amp;&amp; s.sim&lt;60" class="ui yellow label">{{s.sim}}%</a>
                      <a v-if="s.sim&gt;=20 &amp;&amp; s.sim&lt;40" class="ui olive label">{{s.sim}}%</a>
                      <a v-if="s.sim&lt;20" class="ui green label">{{s.sim}}%</a>
                    </td>
                  </tr>

                </tbody>
              </table>

            </template>

          </div>
        </template>


        <template v-if="active[4]">
          <loader v-if="loading"></loader>
          <div class="ui segment">
            <h3 class="ui header">上传题目</h3>
            <form class="ui form">
              <div class="fields">
                <div class="eight wide field">
                  <label>题目标题</label>
                  <input v-model="form_problem.title" type="text" name="title" placeholder="Title" />
                </div>
                <div class="eight wide field">
                  <label>关联作业</label>
                  <select v-model="form_problem.topic_flag" class="ui fluid search dropdown">
                    <option value="">作业列表...</option>
                    <option v-for="item in list_topic">{{item.id}}-{{item.title}}</option>
                  </select>

                </div>
              </div>

              <div class="field">
                <!-- <div class="six wide field"> -->
                <label>题目描述</label>
                <textarea v-model="form_problem.description"></textarea>
                <!-- </div> -->
              </div>
              <div class="fields">
                <div class="eight wide field">
                  <label>时间限制(秒)</label>
                  <input v-model="form_problem.time_limit" type="text" placeholder="Time Limits" />
                </div>
                <div class="eight wide field">
                  <label>内存限制(M)</label>
                  <input v-model="form_problem.memory_limit" type="text" placeholder="Mem Limits" />
                </div>
              </div>
              <div class="fields">
                <div class="eight wide field">
                  <label>[测试用例-01] 输入</label>
                  <textarea v-model="form_problem.input0" rows="3"></textarea>
                </div>
                <div class="eight wide field">
                  <label>[测试用例-01] 输出</label>
                  <textarea v-model="form_problem.output0" rows="3"></textarea>
                </div>
              </div>
              <button class="ui button">增加测试用例</button>
              <button v-on:click="problemadd()" class="ui primary button">提交</button>
            </form>
          </div>
        </template>

      </div>
    </div>
    <auth-modal v-bind:errorinfo='errorinfo'></auth-modal>
  </div>


  <script>

    Vue.component('loader', {
      template: '<div class="ui icon message"> <i class="notched circle loading icon"></i> <div class="content"> <div class="header">稍候 </div> <p>我们正在为您获取内容。</p> </div> </div>'
    })




    var vm = new Vue({
      el: '#app',
      data: {
        active: [true, false, false, false, false],
        loaded: [true, false, false, false, false],
        childactive: false,
        loading: true,
        loading_analysis: true,
        form_stu_posting: false,
        form_stu_muti_posting: false,
        form_topic_posting: false,
        form_class_posting: false,
        form_problem_posting: false,
        list_class: [],
        list_stu: [],
        list_topic: [],
        list_problem: [],
        object_statistics: {},
        object_analysis: {},
        list_container: [],
        form_stu: {
          id: '',
          password: '',
          classes_flag: ''
        },
        form_stu_muti: {
          arg0: '',
          arg1: '',
          password: '',
          classes_flag: ''
        },
        form_topic: {
          title: '',
          begin_time: '',
          end_time: '',
          class_flag: ''
        },
        form_class: {
          name: ''
        },
        form_problem: {
          title: '',
          topic_flag: '',
          description: '',
          time_limit: 1000,
          memory_limit: 64,
          tests_count: 1,
          input0: '',
          output0: ''
        },
        errorinfo: {
          type: 0,
          msg: ''
        }

      },
      created: function () {
        getStatistice();
        getDockerStatus();
      },
      methods: {
        back: function () {
          window.location.href = "/topic";
        },
        goSubmission: function (sid) {
          window.open("/submission/" + sid);
        },
        ovactive: function () {
          this.active = [true, false, false, false, false];
          
        },
        cmactive: function () {
          this.active = [false, true, false, false, false];
          getClassList();
        },
        smactive: function () {
          this.active = [false, false, true, false, false];
          getStulist();
          getClassList();
        },
        tmactive: function () {
          this.active = [false, false, false, true, false];
          getTopicList();
          getClassList();
        },
        pmactive: function () {
          this.active = [false, false, false, false, true];
          getTopicList();
        },
        stuadd: function () {
          postStuAdd(this.form_stu.id, this.form_stu.password, this.form_stu.classes_flag);
        },
        stuaddmuti: function () {
          postStuAddMuti(this.form_stu_muti.arg0, this.form_stu_muti.arg1, this.form_stu_muti.password, this.form_stu_muti.classes_flag);
        },
        topicadd: function () {
          postTopicAdd(this.form_topic.title, this.form_topic.begin_time, this.form_topic.end_time, this.form_topic.class_flag);
        },
        classadd: function () {
          postClassAdd(this.form_class.name);
        },
        problemadd: function () {
          postProblemAdd(this.form_problem.title, this.form_problem.topic_flag, this.form_problem.description, this.form_problem.time_limit, this.form_problem.memory_limit, this.form_problem.tests_count, this.form_problem.input0, this.form_problem.output0);
        },
        analysisactive: function (topic_id) {
          this.childactive = true;
          getAnalysis(topic_id);
        },
        analysisback: function () {
          this.childactive = false;
          this.loading_analysis = true;
        }
      }
    })


    function getStatistice() {
      this.loading = true;
      axios.get('/api/statistics', {
        headers: {
          'Access-Token': window.localStorage.getItem("token")
        }
      })
        .then(function (response) {
          vm.object_statistics = response.data.data;
          vm.loading = false;
        })
        .catch(function (error) {
          if (/50\d/.test(error.response.status)) {
            vm.errorinfo.type = 500;
          } else {
            vm.errorinfo.type = 400;
            vm.errorinfo.msg = error.response.data.msg;
          }
          $('.ui.basic.modal').modal('show');
          $(":root").delay(3000).queue(function () {
            $('.ui.basic.modal').modal('hide');
            window.location.href = "/login";
          });
        })
    }

    function getDockerStatus() {
      axios.get('/api/status', {
        headers: {
          'Access-Token': window.localStorage.getItem("token")
        }
      })
        .then(function (response) {
          vm.list_container = response.data;
        })
        .catch(function (error) {
        })
    }

    function getStulist() {
      this.loading = true;
      axios.get('/api/u', {
        headers: {
          'Access-Token': window.localStorage.getItem("token")
        }
      })
        .then(function (response) {
          vm.list_stu = response.data.data;
          vm.loading = false;
        });
    }

    function postStuAdd(id, password, classes_flag) {
      vm.form_stu_posting = true;
      axios({
        url: '/api/u',
        method: 'post',
        headers: { 'Access-Token': window.localStorage.getItem("token") },
        data: {
          id: id,
          password: password,
          classes_flag: classes_flag
        }
      })
        .then(function (response) {
          vm.form_stu_posting = false;
        });
    }

    function postStuAddMuti(arg0, arg1, password, classes_flag) {
      vm.form_stu_muti_posting = true;
      axios({
        url: '/api/u',
        method: 'put',
        headers: { 'Access-Token': window.localStorage.getItem("token") },
        data: {
          id0: arg0,
          id1: arg1,
          password: password,
          classes_flag: classes_flag
        }
      })
        .then(function (response) {
          vm.form_stu_muti_posting = false;
        });
    }


    function getTopicList() {
      this.loading = true;
      axios.get('/api/t', {
        headers: {
          'Access-Token': window.localStorage.getItem("token")
        }
      })
        .then(function (response) {
          vm.list_topic = response.data.data;
          vm.loading = false;
        });
    }

    function getClassList() {
      this.loading = true;
      axios.get('/api/c', {
        headers: {
          'Access-Token': window.localStorage.getItem("token")
        }
      })
        .then(function (response) {
          vm.list_class = response.data.data;
          vm.loading = false;
        });
    }

    function postTopicAdd(title, begin_time, end_time, class_flag) {
      vm.form_topic_posting = true;
      axios({
        url: '/api/t',
        method: 'post',
        headers: { 'Access-Token': window.localStorage.getItem("token") },
        data: {
          title: title,
          begin_time: begin_time,
          end_time: end_time,
          class_flag: class_flag
        }
      })
        .then(function (response) {
          vm.form_topic_posting = false;
        });
    }


    function postClassAdd(name) {
      vm.form_class_posting = true;
      axios({
        url: '/api/c',
        method: 'post',
        headers: { 'Access-Token': window.localStorage.getItem("token") },
        data: {
          name: name
        }
      })
        .then(function (response) {
          vm.form_class_posting = false;
        });
    }


    function postProblemAdd(title, topic_flag, description, time_limit, memory_limit, tests_count, input0, output0) {
      vm.form_problem_posting = true;
      axios({
        url: '/api/p',
        method: 'post',
        headers: { 'Access-Token': window.localStorage.getItem("token") },
        data: {
          title: title,
          topic_flag: topic_flag,
          description: description,
          time_limit: time_limit,
          memory_limit: memory_limit,
          tests_count: tests_count,
          input0: input0,
          output0: output0
        }
      })
        .then(function (response) {
          vm.form_problem_posting = false;
        });
    }

    function getAnalysis(topic_id) {
      this.loading = true;
      axios.get('/api/analysis', {
        headers: {
          'Access-Token': window.localStorage.getItem("token")
        },
        params: {
          topic_id: topic_id
        }
      })
        .then(function (response) {
          vm.object_analysis = response.data.data;
          vm.loading_analysis = false;
        })
        .catch(function (error) {
          console.log(error);
          vm.loading_analysis = false;
        });
    }







  </script>
</body>


</html>